<script setup lang="ts">
import { getOrderInfoList, Item, Result } from '@/apis/order';
import { ref } from 'vue';
import orderStatus from "./orderStatus.vue";
import orderOperation from "./orderOperation.vue";
const props = defineProps<{
  status: number
}>()
let pullDownLogin = ref(true)
let orderInfoData = ref<Item[]>([]);
type refreshStatusType = "more" | "loading" | "no-more"
let refreshStatus: refreshStatusType = "loading"


const useGetOrderInfo = () => {
  let page = 0
  const getOrderInfo = async () => {
    page++
    const res = await getOrderInfoList({
      page,
      pageSize: 10,
      orderState: props.status,
    });
    return res
  }
  return { getOrderInfo, page }
}


let getOrder: () => Result | Promise<Result>
let res: Result
const pullDownRefresh = async () => {
  pullDownLogin.value = true
  if (pullDownLogin.value) {
    refreshStatus = "loading"
  }
  const { getOrderInfo } = await useGetOrderInfo()
  getOrder = getOrderInfo
  res = await getOrderInfo()
  orderInfoData.value = res.items;
  pullDownLogin.value = false
  if (res.items.length >= 5) return refreshStatus = "loading"
  refreshStatus = 'no-more'
}
const orderDetail = (id: string) => {
  uni.navigateTo({
    url: "./detail?id=" + id,
  });
};
const contentText = {
  contentdown: '上拉显示更多',
  contentrefresh: '正在加载中...',
  contentnomore: '没有更多数据了'
}
const refresh = async () => {
  if (res.items.length !== 10) return 
  uni.showLoading({
    title: '努力加载中...',
    mask: true,
  })
  res = await getOrder()
  orderInfoData.value.push(...res.items)
  uni.hideLoading()
}
</script>
<template>
  <scroll-view enhanced scroll-y :show-scrollbar="false" refresher-enabled :refresher-triggered="pullDownLogin"
    @refresherrefresh="pullDownRefresh" lower-threshold="100" @scrolltolower="refresh" scroll-anchoring>
    <uni-load-more style="font-size: 28rpx; text-align: center; margin-top: 30rpx;" :status="refreshStatus"
      :content-text="contentText" :showIcon="false" v-if="pullDownLogin" />
    <view class="card" v-for="item in orderInfoData" :key="item.id">
      <!-- 订单相关 -->
      <orderStatus :createTime="item.createTime" :status="item.orderState" />
      <!-- 商品信息 -->
      <navigator class="goods" @click="orderDetail(item.id)" hover-class="none" v-for="v in item.skus" :key="v.id">
        <view class="cover">
          <image :src="v.image"></image>
        </view>
        <view class="meta">
          <view class="name ellipsis">{{ v.name }}</view>
          <view class="type" v-for="(properties, index) in v.properties" :key="index">{{ properties.propertyMainName
          }}
            {{ properties.propertyValueName }}</view>
        </view>
      </navigator>
      <!-- 支付信息 -->
      <view class="payment">
        <text class="quantity">共{{ item.totalNum }}件商品</text>
        <text>实付</text>
        <text class="amount">
          <text class="symbol">¥</text>{{ item.payMoney.toFixed(2) }}
        </text>
      </view>
      <!-- 订单操作 -->
      <orderOperation :status="item.orderState" />
    </view>
    <uni-load-more style="font-size: 28rpx; text-align: center; margin-top: 30rpx;" :status="refreshStatus"
      :content-text="contentText" :showIcon="false" v-if="!pullDownLogin" />
  </scroll-view>
</template>